<template>
  <div id="components-layout-demo-basic">
    <a-layout>
      <a-layout-content style="margin-bottom: 30px">
        <a-row type="flex" justify="space-around" align="middle">
          <a-col :span="16" align="left">
            <h1 style="margin: 30px">
              <a-avatar
                style="
                  color: #cbe2e4;
                  background: linear-gradient(to bottom, #72c6ef, #004e8f);
                  font-size: large;
                "
              >
                <a-icon type="search" />
              </a-avatar>
              “{{ keyword }}”的搜索结果是：
            </h1>
            <a-list
              item-layout="horizontal"
              :data-source="result"
              size="large"
              :pagination="pagination"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta description="课程简介">
                  <nuxt-link slot="title" :to="'/course/' + item.id">{{
                    item.title
                  }}</nuxt-link>
                  <a-avatar
                    slot="avatar"
                    style="color: #cbe2e4; background: #6b9bb8"
                  >
                    <a-icon type="book" />
                  </a-avatar>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import course from "@/api/course";

export default {
  data() {
    return {
      keyword: "",
      result: [],
      pagination: {
        onChange: (page) => {
          console.log(page);
        },
        pageSize: 5,
      },
    };
  },
  created() {
    this.keyword = this.$route.query.keyword;
    this.initResult();
  },
  methods: {
    initResult() {
      course.searchCourse(this.keyword).then((response) => {
        this.result = response.data.data.courses;
        console.log(result);
      });
    },
  },
};
</script>

<style scoped>
#components-layout-demo-basic {
  text-align: center;
}

#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #fff;
  color: black;
}

#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}

#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
</style>
